<template>
    <el-dialog :title="this.$root.lang.userinfo.buyLog.invoice.title" :visible.sync="showDialog" @close="closeDialog" width="50%"  :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent class="change-password" :model="form" ref="form" :rules="rules" size="small" label-position="right" label-width="140px">
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.invoiceHeader" prop="invoiceHeader">
          <el-input v-model="form.invoiceHeader"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.invoiceType" prop="invoiceType">
          <el-select v-model="form.invoiceType" :placeholder="$root.lang.userinfo.buyLog.order.select">
            <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in baseState.invoiceType"></el-option>        
          </el-select>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.unifiedSocialCreditCode" prop="unifiedSocialCreditCode">
          <el-input v-model="form.unifiedSocialCreditCode"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.nameOfDepositBank" prop="nameOfDepositBank">
          <el-input v-model="form.nameOfDepositBank"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.basicAccountNumber" prop="basicAccountNumber">
          <el-input v-model="form.basicAccountNumber"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.addrOfRegisteredPlace" prop="addrOfRegisteredPlace">
          <el-input v-model="form.addrOfRegisteredPlace"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.registeredFixedTelephone" prop="registeredFixedTelephone">
          <el-input v-model="form.registeredFixedTelephone"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.mailingAddress" prop="mailingAddress">
          <el-input v-model="form.mailingAddress"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.addressee" prop="addressee">
          <el-input v-model="form.addressee"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.telephone" prop="telephone">
          <el-input v-model="form.telephone"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.userinfo.buyLog.invoice.mailbox" prop="mailbox">
          <el-input v-model="form.mailbox"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn" @click="onSubmit()" :loading="loading" type="primary">{{ this.$root.lang.userinfo.buy.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
import '@/options/baseState'
export default {
  name: 'EditInvoice',
  data() {
    return {
    	loading: false,
    	showDialog: this.show,
    	form: {
    	},
      baseState: baseState,
    	rules: {
        invoiceHeader: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.invoiceHeader, trigger: 'blur' }],
        invoiceType: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.invoiceType, trigger: 'blur' }],
        unifiedSocialCreditCode: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.unifiedSocialCreditCode, trigger: 'blur' }],
        nameOfDepositBank: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.nameOfDepositBank, trigger: 'blur' }],
        basicAccountNumber: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.basicAccountNumber, trigger: 'blur' }],
        addrOfRegisteredPlace: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.addrOfRegisteredPlace, trigger: 'blur' }],
        registeredFixedTelephone: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.registeredFixedTelephone, trigger: 'blur' }],
        mailingAddress: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.invoiceHeader, mailingAddress: 'blur' }],
        addressee: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.addressee, trigger: 'blur' }],
        telephone: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.telephone, trigger: 'blur' }],
        mailbox: [{ required: true, message: this.$root.lang.userinfo.buyLog.invoice.rule.mailbox, trigger: 'blur' }],
      },
    }
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
      if(value) {
        this.fetchData()
      }
  	},
  },
  props: {
  	show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
  	closeDialog() {
      this.$emit('editReceive',{
        key: 'showInvoice',
        value: this.showDialog
      })
    },
    onSubmit() {
    	this.$refs['form'].validate((valid) => {
        if(valid) {
        	this.editInfo()
        }else{
          return false
        }
      })
    },
  	editInfo() {
      this.loading = true
      this.request({
        url: '/payment/invoice/config',
        method: 'post',
        data: this.$root.optionProcess(this.form)
      }).then(response => {
        this.loading = false
        this.$message({
          message:  this.$root.lang.confirm.editSuccess,
          type: 'success',
          duration: 3 * 1000
        })
        this.showDialog = false
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    fetchData() {
      this.loading = true
      this.request({
        url: '/payment/invoice/config/get',
        method: 'get',
      }).then(response => {
        this.loading = false
        this.form = response.result
      }).catch(error => {
        this.loading = false
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.moneyReal {
  font-size: 18px;
  margin-right: 15px;
  color: red;
}
.moneyShow {
  text-decoration: line-through
}
</style>